<template>
    <div :id="'f'+times" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
    TitleComponent, type TitleComponentOption,
    TooltipComponent, type TooltipComponentOption,
    LegendComponent, type LegendComponentOption,
    GridComponent, type GridComponentOption
} from 'echarts/components';
import { FunnelChart, type FunnelSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  FunnelChart,
  CanvasRenderer
]);
type EChartsOption = echarts.ComposeOption<
  GridComponentOption | TitleComponentOption | FunnelSeriesOption | LegendComponentOption | TooltipComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
const times = new Date().getTime()
onMounted(() => {
    var chartDom = document.getElementById('f'+times);
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            show: false,
            text: 'Funnel'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
            show: false,
            data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
        },
        series: [
            {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 15,
            bottom: 15,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending', // 'ascending'，'descending'，'none'（表示按 data 顺序）
            gap: 2,
            label: {
                show: true,
                position: 'inside',
                color: '#fff',
                fontSize: 14,
                fontWeight: 500,
                overflow: 'breakAll',
                formatter: '{b}: {c}/吨'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                fontSize: 20
                }
            },
            data: props.data.seriesDataList
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>
